<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/discount/seckilling.css">
    <title>限时秒杀-正在进行</title>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <searchs></searchs>

            <car_box></car_box>

        </div>

        <!-- 商品分类 -->
        <div class="class_box wrap">
            <div class="sub_nav_box">
                <ul class="sub_nav fl">
                    <li class="active">限时秒杀</li>
                    <li @click='group_buy'>团购优惠</li>
                    <li @click='cyc_buy'>周期购</li>
                </ul>
            </div>
        </div>
        <!-- 限时秒杀 -->
        <div class="time_box wrap">
            <div class="swiper-container seckill_swiper" @mouseenter='show_swiper_btn' @mouseleave='hidden_swiper_btn'>
                <div class="swiper-wrapper">
                    <div class="swiper-slide time_item stop-swiping" :class="{seckill_listactive:seckill_listactive==index}" v-for="(item,index) in secKillTiming" @click='seckill_list(item.dateTime,item.timing,index)'>
                        <span class="time_tit">{{item.startTime.substring(item.startTime.length-9)}}</span>
                        <span class="time_active" v-if="item.datas">{{item.time_text}}</span>
                        <span class="time_active" v-else>{{item.dateTime}}</span>
                    </div>
                    <!-- <div class="swiper-slide time_item stop-swiping" v-show="seckill_listactive==index" :class="{seckill_listactive:seckill_listactive==index}" v-for="(item,index) in secKillTiming" @click='seckill_list(item.dateTime,item.timing,index)'>
                        <span class="time_tit">{{item.startTime.substring(item.startTime.length-9)}}</span><span class="time_active">{{item.time_text}}</span>
                    </div> -->
                </div>
                <!-- Add Arrows -->
                <!-- <div class="swiper-button-next" v-show='seckill_swiper_btn'></div> -->
                <!-- <div class="swiper-button-prev" v-show='seckill_swiper_btn'></div> -->
            </div>
        </div>

        <!-- 秒杀列表 -->
        <div class="seckill_box wrap">
            <div class="seckill_item fl" v-for='(item,index) in list'>
                <div class="seckill_img cursor" @click='seckill_detail(item.secKIllId,item.spuId)'>
                    <img :src="item.coverImg" alt="">
                </div>
                <div class="seckill_text">
                    <p class="seckill_tit">
                        {{item.spuName}}
                    </p>
                    <div class="seckill_money">
                        <span class="money_icon">￥</span>{{item.seckillPrcice}}<span class="old_money">￥{{item.showPrice}}</span>
                        <span  @click='seckill_detail(item.secKIllId,item.spuId)' :class="{no_active:item.seckill_time==0}" class="buy_btn fr">立即抢购</span>
                    </div>
                    <div class="jindutiao">
                        <span>剩余{{item.stock}}件</span>
                        <!-- <el-progress class="star_num" :text-inside="true" :stroke-width="4" :percentage="item.saleQuantity" color="rgba(204,24,24,1)"></el-progress> -->
                    </div>

                </div>
            </div>
        </div>
        <!-- 即将开始 -->
        <div class="not_begin seckill_box wrap" v-show='seckill_box'>
            <div class="begin_item fl" v-for='(item,index) in list'>
                <div class="seckill_img">
                    <img :src="item.coverImg" alt="">
                </div>
                <div class="seckill_text">
                    <p class="seckill_tit">
                        {{item.spuName}}
                    </p>
                    <div class="begin_money">
                        <span class="money_icon">￥</span>{{item.seckillPrcice}}<span class="old_money">￥{{item.showPrice}}</span><span class="begin_btn fr">立即抢购</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="integral_page wrap">
            <el-pagination background @current-change="handleCurrentChanges" :page-size="20" 
                layout="prev, pager, next" :total="total" class="page_list">
            </el-pagination>
        </div>
       <div class="wrap clear_both">             <productfooter></productfooter>         </div>
    </div>
    
    <script src="../js/axios.js"></script>         <script src="../js/qs.js"></script>
    <script src="../js/swiper-4.3.5.min.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    seckill_swiper_btn:true,
                    books:20,
                    car_active:false,
                    seckill_box:false,
                    secKillTiming:'',
                    dateTime:'',
                    timing:'',
                    list:'',
                    seckill_listactive:0,
                    total:0
                };
            },
            created() {
                
            },
            mounted() {
                // 秒杀
                var mySwiper = new Swiper('.seckill_swiper',{
                    slidesPerView: 5,
                    spaceBetween: 0,
                    slidesPerGroup: 2,
                    // loop: true,
                    loopFillGroupWithBlank: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    observer:true,//修改swiper自己或子元素时，自动初始化swiper 
                    observeParents:false,//修改swiper的父元素时，自动初始化swiper 
                    onSlideChangeEnd: function(swiper){ 
                        swiper.update();  
                        mySwiper.startAutoplay();
                        mySwiper.reLoop();  
                    },
                })



                this.getSecKillTiming()
            },
            methods: {
                handleCurrentChanges(value){
                    
                },
                seckill_list(dateTime,timing,index){
                    this.timing = timing
                    this.dateTime = dateTime
                    this.seckill_listactive = index
                    app.querySecKillList()
                },
                // 获取秒杀列表
                querySecKillList(){
                    axios({
                        method:"POST",
                        url:base_url + "/admin/seckill/querySecKillList",
                        data:Qs.stringify({
                            dateTime:this.dateTime,
                            timing:this.timing,
                            pageSize:20,
                            pageNum:1
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.total = res.data.data.pageInfo.total
                        app.list = res.data.data.pageInfo.list.map(function (item) {
                            var new_item = item
                            return new_item
                        })
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 获取秒杀时间段
                getSecKillTiming(){
                    var that = this
                    axios({
                        method:"POST",
                        url:base_url + "/admin/seckill/getSecKillTiming",
                        data:Qs.stringify({
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        
                        var timestamp = Date.parse(new Date())
                        app.secKillTiming = res.data.data.secKillTiming.map(function (item) {
                            var new_item = item
                            new_item.time_star = Date.parse(item.startTime)
                            new_item.time_end = Date.parse(item.endTime)
                            if (new Date(new_item.time_star).toDateString() === new Date().toDateString()) {
                                new_item.datas = true
                                console.log("当天");
                            } else if (new Date(new_item.time_star) > new Date()){
                                new_item.datas = false
                            }
                            if (timestamp<new_item.time_star) {
                                new_item.time_text = '未开始'
                            }else if (new_item.time_star<timestamp&&timestamp<new_item.time_end) {
                                new_item.time_text = '正在进行'
                            }else if (new_item.time_end<timestamp) {
                                new_item.time_text = '已结束'
                            }
                            new_item.text_active = false
                            return new_item
                        })
                        console.log(app.secKillTiming)
                        app.dateTime = res.data.data.secKillTiming[0].dateTime
                        app.timing = res.data.data.secKillTiming[0].timing
                        app.querySecKillList()
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                seckill_detail(id,spuId){
                    window.location.href='../product/seckilling_detail.html?id='+id+'&spuId='+spuId
                },
                // 显示购物车               
                go_shop_car(){
                    window.location.href='../product/shop_car.html'  
                },               
                car_box(){
                    this.car_active = !this.car_active
                },
                // 显示隐藏秒杀按钮
                show_swiper_btn(){
                    this.seckill_swiper_btn = true
                },
                hidden_swiper_btn(){
                    this.seckill_swiper_btn = false
                },
                cyc_buy(){
                    window.location.href='cyc_buy.html'
                },
                group_buy(){
                    window.location.href='group_buy.html'
                },
                search_btn(){
                    window.location.href='../product/search.html'
                }
            }
        })
        
    </script>
</body>

</html>